<template>
  <el-dialog
    @close="close"
    title="禁用管理"
    :visible.sync="dialog"
    width="35%"
  >
    <el-form size="mini" :model="formInline" :rules="rules" ref="formInline" label-width="100px">
      <el-form-item label="用户昵称：" prop="operation" >
          {{username}}
      </el-form-item>
      <el-form-item label="用户ID：" prop="dictKey">
        {{id}}
      </el-form-item>
      <el-form-item label="用户手机号：" prop="dictValue">
          {{phone}}
      </el-form-item>
      <el-form-item label="封禁时长：" prop="description">
        <el-select v-model="formInline.timespan" @change="selectChange" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-radio class="rad" v-model="timeRadio" @change="radioChange" label="1">自定义时间</el-radio>
      <div class="timee">
      <el-form-item prop="begintime" v-show="hiddenTime" class="input_coac"   label="时间">
        <el-date-picker class="input_s in231"  v-model="formInline.begintime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
      </el-form-item>
      <el-form-item prop="endtime" v-show="hiddenTime" class="input_co1ac"   label="—"  >
        <el-date-picker  v-model="formInline.endtime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item  >
      </div>
      <el-form-item label="" prop="remark">
        <textarea placeholder="解封说明，该说明会提示给用户" v-model="formInline.remark"></textarea>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="btnLoading" @click="banUserClick">封 禁</el-button>
      <!--<el-button :disabled="btnLoading" @click="dialog = false">解封</el-button>-->
      <el-button type="primary" :loading="btnLoading" @click="freedUserClick">解 封</el-button>
    </span>
  </el-dialog>

</template>
<script>
  import {disableUserAPI , freedUserAPI , getBannedDetailAPI , updateBannedDetailAPI} from '@/api/person'

  export default {
    name: 'Disable',

    props: {
      dialog_: {
        type: Boolean,
        default: false
      },
      username: {
        type: String,
        default: null
      },
      phone: {
        type: String,
        default: null
      },
      id: {
        type: Number,
        default: null
      },
      bannedStatus: {
        type: Number,
        default: null
      },
    },
    data() {
      var validateSort = (rule, value, callback) => {``
        var reg = /^[0-9]\d*$/
        if (value === null || value === '' | value === undefined) {
          callback()
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的数字'))
        } else {
          callback()
        }
      }
      return {
        props: {
          label: 'title',
          children: 'children'
        },
        options: [{
          value: 1,
          label: '7天'
        }, {
          value: 2,
          label: '十五天'
        }, {
          value: 3,
          label: '一个月'
        }, {
          value: 4,
          label: '三个月'
        }, {
          value: 5,
          label: '六个月'
        }, {
          value: 6,
          label: '十二个月'
        }, {
          value: 100,
          label: '永久封禁'
        }],
        timeRadio: '',
        hiddenTime:false,
        keyDisable:false,
        dialog: false,
        formInline: {
          userid: this.id,
          timespan:'',
          remark: '',
          begintime:'',
          endtime:'',
          remark:''
        },
        btnLoading: false,
        treeData: [],
        rules: {
          dictKey: [
            { required: true, message: '请填写业务配置名称', trigger: 'blur' }
          ],
          dictValue: [
            { required: true, message: '请填写业务配置值', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请填写描述', trigger: 'blur' }
          ],
          sort: [
            { validator: validateSort, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      // 封禁用户的点击事件
      banUserClick(){
        if(this.bannedStatus == 10){
          updateBannedDetailAPI(this.formInline).then(res => {
            if (res.code === 0) {
              this.$message.success("封禁成功")
              this.dialog = false
              this.$emit('success')
            } else {
              this.$message.error("封禁失败")
            }
          })
        }else{
          disableUserAPI(this.formInline).then(res => {
            if (res.code === 0) {
              this.$message.success("封禁成功")
              this.dialog = false
              this.$emit('success')
            } else {
              this.$message.error("封禁失败")
            }
          })
        }

      },
      // 解封
      freedUserClick(){
        freedUserAPI(this.formInline).then(res => {
          if (res.code === 0) {
            this.dialog = false
          } else {
            this.$message.error("封禁失败")
          }
        })
      },
      radioChange(data){
        if(data == 1){
          this.hiddenTime = true;
          this.formInline.timespan = '';
        }
      },
      selectChange(){
        this.hiddenTime = false
        this.timeRadio = '';
        this.formInline.begintime = '';
        this.formInline.endtime = '';
      },
      close() {
        this.$emit('close')
      },
    },
    mounted() {
      debugger
      this.dialog = this.dialog_
      getBannedDetailAPI({userid:this.id}).then(res => {
              this.btnLoading = false
              if (res.code === 0) {
                this.formInline = res.data
                if(res.data.timespan == 0){
                  this.formInline.timespan = '';
                    this.timeRadio = "1"
                    this.hiddenTime = true
                } else {
                  this.formInline.begintime = '';
                  this.formInline.endtime = '';
                }
              }
            })

    }
  }
</script>
<style>
  form{
    position:relative;
  }
  .rad{
    position:absolute;
    left: 295px;
    top: 174px;
  }
  textarea{
    width:400px;
    height:70px;
  }
  .timee{

  }
  .timee input_coac{
    float:left;
    width:130px;

  }
  .input_co1ac{
    float:left;
    margin-left: 218px;
    margin-top: -47px;
  }
  .in231{
    width: 190px!important;
  }
</style>
